<div class="flex flex-wrap ps-3 ">
  <% files.with_attached_file.each do |timeline_event_file| %>
    <a class="me-3 mt-3 flex border overflow-hidden rounded hover:shadow-md border-red-300 bg-white text-red-600 hover:border-red-500 hover:text-red-600 focus:ring-2 focus:ring-offset-2 focus:ring-focusColor-500" href="<%= download_timeline_event_file_path(timeline_event_file) %>" target="_blank">
      <span class="course-show-attachments__attachment-title rounded text-xs font-semibold inline-block whitespace-nowrap truncate w-32 md:w-42 h-full px-3 py-2 leading-loose"><%= timeline_event_file.file.filename %></span>
      <span class="flex w-10 justify-center items-center p-2 bg-red-600 text-white">
        <i class="if i-download-regular"></i>
      </span>
    </a>
  <% end %>
</div>
